<template>
  <div class="fullMain">
    <div class="contentAll" style="overflow:hidden;z-index: 200;">
      <!--插入验证提示框-->
      <div v-transfer-dom>
        <alert v-model="isShowAlert"> {{alertText}}</alert>
      </div>
      <div style="height:10px"/>

      <!--选择按钮“填写上周记录”-->
      <div class="last_record_box">
        <x-switch title="填写上周周报:" :value-map="[false, true]" v-model="lastOrThisMonth"></x-switch>
      </div>

      <divider>本周总结</divider>
      <div class="temp" v-if="showNull">还没有内容呢，赶快去填写吧</div>
      <!--展示已经填写的内容-->
      <div class="temp" v-for="(item,index) in reportList" :key="index">
        <!--对已保存记录的操作按钮图标-->

        <div style="margin-top: 10px">
          <img src="~static/img/report/modify.png"
               @click="modifyMemory(item)" height="30" width="30" style="float: right;margin-top: -5px"/>
        </div>
        <div>
          <div style="height: 25px">
            <span style="float: left;color: #b2b2b2">标题：</span>
            <span style="float: left">{{item.title}}</span>
          </div>
          <div style="height: 25px">
            <span style="float: left;color: #b2b2b2">用时：</span>
            <span style="float: left">{{item.hour}}h</span>
          </div>
          <div style="height: 25px">
            <span style="float: left;color: #b2b2b2">工作内容：</span>
            <span style="float: left">{{item.workContent}}</span>
          </div>
          <div style="height: 25px">
            <span style="float: left;color: #b2b2b2">成效：</span>
            <span style="float: left">{{item.effect}}</span>
          </div>
        </div>
        <div style="height: 15px;margin-left: calc( 100% - 30px);">
          <img src="~static/img/report/delete.png" height="45" width="45"
               style="margin-top: -21px" @click="deleteMemory(item)"
          />
        </div>
      </div>
      <div>
        <span style="display: inline-flex;margin-left: 80%;margin-top: 10px;">
        <img src="~static/img/report/add.png" height="35" width="35" alt=""
             @click="showEditFun"/>
      </span>
      </div>
      <!--本周计划内容填写框-->
      <div v-transfer-dom @touchmove.prevent>
        <popup v-model="showEdit" hide-on-blur height="100%" :should-rerender-on-show=true
               style="background-color: white;">
          <div style="height: 45px;border-top: rgb(169,169,169) solid 1px;border-bottom: rgb(169,169,169) solid 1px;box-shadow: 0 0.5px 5px rgb(169,169,169)">
            <p style="line-height: 45px;font-size: 19px;font-weight: bold;font-family: 微軟正黑體;
            text-align: center;margin: 0;color: rgb(101,101,101)">新增条目</p>
          </div>
          <div id="title" style="height: 35px;border-bottom: #ececec solid 1px;margin: 10px 0 0 10px;">
            <span style="line-height: 35px;color: gray;">标题：</span>
            <input v-model="title" for="title" style="display: inline-block;width: 75%;color: #191970;border: 0;outline:none;"></input>
          </div>
          <div id="hour" style="height: 35px;border-bottom: #ececec solid 1px;margin: 10px 0 0 10px;">
            <span style="line-height: 35px;color: gray">用时（h）：</span>
            <input v-model="hour" for="title" placeholder="请直接输入数值" style="display: inline-block;width: 65%;color: black;border: 0;outline:none;"></input>
          </div>
          <div id="workContent" style="height: auto;box-sizing: border-box;border-bottom: #ececec solid 1px;margin: 10px 0 0 10px;">
            <p style="line-height: 35px;margin: 5px 0;color: gray">工作内容：</p>
            <textarea v-model="workContent" id="work_content" placeholder="请输入工作内容"
                      style="color: black;border: 0;width: 91%;height: 4.8em;padding: 7px;overflow-Y:scroll;outline:none;"></textarea>
          </div>
          <div id="effect" style="height: auto;box-sizing: border-box;border-bottom: #ececec solid 1px;margin: 10px 0 0 10px;">
            <p style="line-height: 35px;margin: 5px 0;color: gray;">成效：</p>
            <textarea v-model="effect" :max="300" placeholder="请输入完成情况"
                      style="color: black;border: 0;width: 91%;height: 4.8em;padding: 7px;overflow-Y:scroll;outline:none;"></textarea>
          </div>
          <div style="height: 70px;width: 100%">
            <div style="width: 210px;margin: 15px auto;">
              <button @click="clearValue"
                      style="margin-right: 25px;font-size: medium;height: 50px;width:85px;border-radius: 16px;color: white;border: none;background-color: rgba(26,188,156,.8)">
                取消
              </button>
              <button @click="saveTemporary"
                      style="font-size: medium;height: 50px;width:85px;border-radius: 16px;color: white;border: none;background-color: rgba(26,188,156,.8)"
              >保存
              </button>

            </div>
          </div>
        </popup>
      </div>

      <divider>下周计划</divider>
      <!--下周计划内容填写框-->
      <div class="edit">
        <span class="title">下周计划完成：</span>
        <x-textarea v-model="nextWeekPlan" :max="300" placeholder="请输入下周计划完成" class="input_border textarea_box"
                    style="margin-bottom: 10px;padding:10px"
        ></x-textarea>
      </div>
    </div>
    <br>

    <!--提交按钮-->
    <x-button type="primary" @click.native="submit"
              style="width:90%;border-radius: 20px;background-color: #1abc9c;margin-bottom: 5px">
      提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交
    </x-button>
  </div>
</template>

<script>
  import {XHeader, XTextarea, XInput, Group, XButton, XSwitch, XDialog, Divider, Popup, Flexbox, FlexboxItem,ConfigPlugin } from 'vux'
  import {mapState} from 'Vuex'
  import year from 'api/year'
  Vue.use(ConfigPlugin, {
    $layout: 'VIEW_BOX'
  })

  export default {
    name: 'CreateWeekReport',
    components: {
      XHeader,
      XTextarea,
      XInput,
      Group,
      XButton,
      XSwitch,
      XDialog,
      Divider,
      Popup,
      Flexbox,
      FlexboxItem,
    },

    props: ['modifyContentWeek'],
    data () {
      return {
        isShowAlert: false,
        alertText: '',
        title: '',//已完成的标题
        hour: '',//用时
        workContent: '',//标题对应的内容
        effect: '',//已完成的内容
        reportList: [],//本周已完成的暂存列表
        nextWeekPlan: '',//下周计划
        lastOrThisMonth: false,
        showEdit: false,//显示填写框
        showNull: true,//无数据时的提示
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
    },
    watch: {
      reportList () {
        this.showNull = this.reportList.length === 0
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      showEditFun () {
        this.showEdit = true
      },
      toView () {
        this.$router.push({name: 'S_view_review'})
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      init () {
        if (this.modifyContentWeek) {
          this.reportList = this.modifyContentWeek.reportList
          this.nextWeekPlan = this.modifyContentWeek.nextWeekPlan
          if (this.modifyContentWeek.year === new Date().getFullYear() && this.modifyContentWeek.week === this.changeDateToWeek()) {
            this.lastOrThisMonth = true
          } else {
            this.lastOrThisMonth = false
          }
        }
      },
      changeDateToWeek () {
        var d1 = new Date()
        var d2 = new Date()
        d2.setMonth(0)
        d2.setDate(1)
        var rq = d1 - d2
        var s1 = Math.ceil(rq / (24 * 60 * 60 * 1000))//本年的第几天
        var s2 = Math.ceil(s1 / 7)//本年的第几周
        return s2
      },
      setToday () {
        let myDate
        //如果填写上周的，就传返回上周的今天的日期
        if (this.lastOrThisMonth) {
          myDate = new Date(new Date().getTime() - 7 * 24 * 3600 * 1000)
        } else {
          myDate = new Date()
        }
        let cmonth = myDate.getMonth() + 1
        let day = myDate.getDate()
        let hour = myDate.getHours()
        if (cmonth < 10) cmonth = '0' + cmonth
        if (day < 10) day = '0' + day
        return myDate.getFullYear() + '-' + cmonth + '-' + day
      },
      clearValue () {
        this.title = ''
        this.hour = ''
        this.workContent = ''
        this.effect = ''
        this.showEdit = false
        
      },
      deleteMemory (item) {
        console.log('deleteMemory')
        const index = this.reportList.indexOf(item)
        this.reportList.splice(index, 1)
      },
      modifyMemory (item) {
        this.showEdit = true
        this.title = item.title
        this.hour = item.hour
        this.workContent = item.workContent
        this.effect = item.effect
        this.deleteMemory()
      },
      judgeValue () {
        if (this.title === '') {
          this.showAlert('请填写【标题】')
          return false
        } else if (this.hour === '') {
          this.showAlert('请填写【用时】')
          return false
        } else if (!/^[1-9]*[0-9]$/.test(this.hour)) {
          this.showAlert('【用时】请输入数字，无需单位')
          return false
        } else if (this.workContent === '') {
          this.showAlert('请填写【工作内容】')
          return false
        } else if (this.effect === '') {
          this.showAlert('请填写【成效】')
          return false
        } else {
          return true
        }
      },
      saveTemporary () {
        if (this.judgeValue()) {
          let arr = {
            title: this.title,
            hour: this.hour,
            workContent: this.workContent,
            effect: this.effect,
          }
          this.reportList.push(arr)
          this.clearValue()
        }
      },
      submit () {
        if (this.nextWeekPlan === '') {
          this.showAlert('请填写【下周计划完成】')
          return
        }
        if (this.workContent !== '' || this.effect !== '') {
          this.saveTemporary()
        }
        //提交
        this.putData()
      },
      async putData () {
        let result
        if (this.modifyContentWeek) {
          result = await year.postUpdateWeekReport({
            date: this.setToday(),
            detail: {
              nextWeekPlan: this.nextWeekPlan,
              reportList: this.reportList,
            },
            // reportId:'',
            reportType: 1,
            userId: this.userInfo.userId
          })
          if (result.code === 0) {
            this.showAlert(result.message)
          } else {
            this.showAlert('修改成功')
            setTimeout(this.back, 1000)
          }
        } else {
          result = await year.postAddWeekReport({
            date: this.setToday(),
            detail: {
              nextWeekPlan: this.nextWeekPlan,
              reportList: this.reportList,
            },
            // reportId:'',
            reportType: 1,
            userId: this.userInfo.userId
          })
          if (result.code === 0) {
            this.showAlert(result.message)
          } else {
            this.showAlert('提交成功')
            setTimeout(this.back, 1000)
          }
        }

      },

    }
  }
</script>

<style scoped>

  input,textarea::-webkit-input-placeholder{color: #D3D3D3;}
  input,textarea:-moz-placeholder{color:#D3D3D3;}
  input,textarea::-moz-placeholder{color:#D3D3D3;}
  input,textarea:-ms-input-placeholder{color:#D3D3D3;}

  *{
    letter-spacing: 1.5px
  }
  .contentAll {
    width: 90%;
    margin-left: 5%;
    border-radius: 20px;
  }

  .temp {
    line-height: 25px;
    padding: 5px 10px;
    background-color: #FFFFFF;
    border-radius: 10px;
    text-align: center;
    color: #b2b2b2;
    margin-top: 10px;
  }

  .icon {
    margin-left: 75%;
    font-size: 20px;
  }

  .last_record_box {
    /*line-height:10px;*/
    background-color: #FFFFFF;
    border-radius: 10px;
  }

  .edit {
    margin-top: 7px;
    line-height: 25px;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 10px;
  }

  .input_border {
    border: #ededed 1px solid;
    border-radius: 5px
  }

  .input_border:before {
    border: none;
  }

  .textarea_box {
    margin-left: 10px;
    margin-top: 5px;
  }

  .content_item {
    margin-top: 3px;

  }

  .textarea_before {
    border: none;
    background-color: #D9D9D9;
    height: .5px;
    margin-left: 15px;
  }
</style>
